<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default.html(bodyClass='pear-container')}">
<head>
    <title>字典管理</title>
</head>
<body>
<section layout:fragment="wrapper">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">字典类型</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" placeholder="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">编码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="code" placeholder="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <select name="status" class="layui-select">
                                        <option value="">全部</option>
                                        <option value="1">启用</option>
                                        <option value="2">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="tb-type-query">
                                    <i class="layui-icon layui-icon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="pear-btn pear-btn-md">
                                    <i class="layui-icon layui-icon-refresh"></i>
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                    <table id="tb-type-table" lay-filter="tb-type-table"></table>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">字典项</div>
                <div class="layui-card-body">
                    <svg class="empty" id="td-data-empty"
                         style="margin-top: 50px;margin-left: 220px;margin-bottom: 80px;" width="184" height="152"
                         viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
                        <g fill="none" fillRule="evenodd">
                            <g transform="translate(24 31.67)">
                                <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
                                <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
                                      fill="#AEB8C2"></path>
                                <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
                                      fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
                                <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
                                <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
                                      fill="#DCE0E6"></path>
                            </g>
                            <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
                                  fill="#DCE0E6"></path>
                            <g transform="translate(149.65 15.383)" fill="#FFF">
                                <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
                                <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
                            </g>
                        </g>
                    </svg>
                    <div class="layui-hide" id="td-data-container">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <input type="hidden" name="typeId">
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" placeholder="" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">编码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="code" placeholder="" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-inline">
                                        <select name="status" class="layui-select">
                                            <option value="">全部</option>
                                            <option value="1">启用</option>
                                            <option value="2">禁用</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                            lay-filter="tb-data-query">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button type="reset" class="pear-btn pear-btn-md">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                        <table id="tb-data-table" lay-filter="tb-data-table"></table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script type="text/html" id="tb-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script type="text/html" id="tb-type-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="details">
            <i class="layui-icon layui-icon-transfer"></i>
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
    </script>

    <script type="text/html" id="tb-data-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="addChild">
            <i class="layui-icon layui-icon-add-1"></i>
        </button>
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
    </script>

    <script type="text/html" id="tb-status">
        {{#if (d.status == '1') { }}
        <span class="layui-badge layui-bg-green">启用</span>
        {{# }else if(d.status == '2'){ }}
        <span class="layui-badge layui-bg-gray">禁用</span>
        {{# } }}
    </script>

    <script th:inline="javascript">
        layui.use(['table', 'form', 'jquery'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;

            table.render({
                elem: '#tb-type-table',
                url: '[(@{/a/sys/dictType/page})]',
                method: 'post',
                response: {
                    statusCode: '20000',
                },
                page: true,
                cols: [
                    [
                        {type: 'checkbox'},
                        {title: '名称', field: 'name', align: 'center'},
                        {title: '编码', field: 'code', align: 'center'},
                        {title: '状态', field: 'status', align: 'center', templet: '#tb-status', width: 80},
                        {title: '操作', toolbar: '#tb-type-bar', align: 'center'}
                    ]
                ],
                skin: 'line',
                height: 'full-230',
                toolbar: '#tb-toolbar',
                defaultToolbar: [
                    {
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    },
                    'filter', 'exports', 'print'
                ]
            });

            table.on('tool(tb-type-table)', function (obj) {
                if (obj.event === 'remove') {
                    removeType(obj);
                } else if (obj.event === 'edit') {
                    editType(obj);
                } else if (obj.event === 'details') {
                    renderData(obj.data['id']);
                }
            });

            table.on('toolbar(tb-type-table)', function (obj) {
                if (obj.event === 'add') {
                    addType();
                } else if (obj.event === 'refresh') {
                    refreshType();
                } else if (obj.event === 'batchRemove') {
                    batchRemoveType(obj);
                }
            });

            form.on('submit(tb-type-query)', function (data) {
                table.reload('tb-type-table', {
                    where: data.field,
                    page: {
                        curr: 1
                    }
                })
                return false;
            });

            const addType = function () {
                layer.open({
                    type: 2,
                    title: '新增字典类型',
                    shade: 0.1,
                    maxmin: true,
                    area: ['900px', '700px'],
                    content: '[(@{/a/sys/dictType/form})]'
                });
            }

            const editType = function (obj) {
                layer.open({
                    type: 2,
                    title: '修改字典类型',
                    shade: 0.1,
                    maxmin: true,
                    area: ['900px', '700px'],
                    content: '[(@{/a/sys/dictType/form})]?id=' + obj.data['id']
                });
            }

            const removeType = function (obj) {
                removeTypeArray([obj.data['id']]);
            }

            const batchRemoveType = function (obj) {
                let data = table.checkStatus(obj.config.id).data;
                if (data.length === 0) {
                    layer.msg("未选中数据", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                let ids = [];
                for (let i = 0; i < data.length; i++) {
                    ids.push(data[i].id);
                }
                removeTypeArray(ids);
            }

            const removeTypeArray = function (array) {
                layer.confirm('确定要删除数据', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.ajax({
                        url: '[(@{/a/sys/dictType/del})]',
                        data: {datas: array},
                        dataType: 'json',
                        type: 'post',
                        success: function (result) {
                            layer.close(loading);
                            if (result.code === '20000') {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    refreshType()
                                });
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                });
            }

            const refreshType = function () {
                table.reload('tb-type-table');
            }

            /**
             *
             */
            const renderData = function (typeId) {
                $("#td-data-empty").addClass("layui-hide");
                $("#td-data-container").removeClass("layui-hide");

                table.render({
                    elem: '#tb-data-table',
                    url: '[(@{/a/sys/dictData/page})]',
                    method: 'post',
                    where: {
                        typeId: typeId
                    },
                    response: {
                        statusCode: '20000',
                    },
                    page: true,
                    cols: [
                        [
                            {type: 'checkbox'},
                            {title: '名称', field: 'title', align: 'center'},
                            {title: '编码', field: 'code', align: 'center'},
                            {title: '排序号', field: 'sort', align: 'center'},
                            {title: '状态', field: 'status', align: 'center', templet: '#tb-status', width: 80},
                            {title: '操作', toolbar: '#tb-data-bar', align: 'center'}
                        ]
                    ],
                    skin: 'line',
                    height: 'full-230',
                    toolbar: '#tb-toolbar',
                    defaultToolbar: [
                        {
                            title: '刷新',
                            layEvent: 'refresh',
                            icon: 'layui-icon-refresh',
                        },
                        'filter', 'exports', 'print'
                    ]
                });

                table.on('tool(tb-data-table)', function (obj) {
                    if (obj.event === 'remove') {
                        removeData(obj);
                    } else if (obj.event === 'edit') {
                        editData(obj);
                    } else if (obj.event === 'addChild') {
                        addData(typeId, obj.data['id']);
                    }
                });

                table.on('toolbar(tb-data-table)', function (obj) {
                    if (obj.event === 'add') {
                        addData(typeId);
                    } else if (obj.event === 'refresh') {
                        refreshData();
                    } else if (obj.event === 'batchRemove') {
                        batchRemoveData(obj);
                    }
                });

                form.on('submit(tb-data-query)', function (data) {
                    let json = Object.assign({}, data.field);
                    // 处理typeId
                    json['typeId'] = typeId;
                    table.reload('tb-data-table', {
                        where: json,
                        page: {
                            curr: 1
                        }
                    })
                    return false;
                });

                const addData = function (typeId, parentId) {
                    layer.open({
                        type: 2,
                        title: '新增字典数据',
                        shade: 0.1,
                        maxmin: true,
                        area: ['900px', '700px'],
                        content: '[(@{/a/sys/dictData/form})]?typeId=' + typeId + '&parentId=' + (parentId || '')
                    });
                }

                const editData = function (obj) {
                    layer.open({
                        type: 2,
                        title: '修改字典数据',
                        shade: 0.1,
                        maxmin: true,
                        area: ['900px', '700px'],
                        content: '[(@{/a/sys/dictData/form})]?id=' + obj.data['id']
                    });
                }

                const removeData = function (obj) {
                    removeDataArray([obj.data['id']]);
                }

                const batchRemoveData = function (obj) {
                    let data = table.checkStatus(obj.config.id).data;
                    if (data.length === 0) {
                        layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    let ids = [];
                    for (let i = 0; i < data.length; i++) {
                        ids.push(data[i].id);
                    }
                    removeDataArray(ids);
                }

                const removeDataArray = function (array) {
                    layer.confirm('确定要删除数据', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: '[(@{/a/sys/dictData/del})]',
                            data: {datas: array},
                            dataType: 'json',
                            type: 'post',
                            success: function (result) {
                                layer.close(loading);
                                if (result.code === '20000') {
                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    }, function () {
                                        refreshData()
                                    });
                                } else {
                                    layer.msg(result.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    });
                }

                const refreshData = function () {
                    table.reload('tb-data-table');
                }
            }
        })
    </script>
</section>
</body>
</html>
